import React, { useRef, useState } from 'react'
import '../../App.css'
import { Confirm, Dialog } from '../../components/dialog'


const App: React.FC = () => {
  // 1. 获取节点
  const input = useRef<HTMLInputElement | null>(null)
  // 2. 上传按钮点击事件  =>  input 点击事件执行
  const handleClick = () => input.current?.click()
  // 3. 选中文件改变事件
  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    if (e.target.files)
      handleUpload(e.target.files)
  }
  // 4. 拖拽目标在拖拽区域松手事件
  const handleDrop: React.DragEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault();
    handleUpload(e.dataTransfer.files)
  }
  // 5. 保证松手事件正常出发， 默认是不会执行的
  const handleDragOver: React.DragEventHandler<HTMLDivElement> = (e) => e.preventDefault()
  // 6. 处理上传
  const handleUpload = (files: FileList) => {
    Dialog.confirm({
      title: '警告',
      content: '确认要上传吗？',
      onOk() {
        const fileList = Array.from(files);

        // 1. 上传的文件是不是图片
        const isImage = fileList.every(file => {
          return file.type.includes('image')
        })

        // 2. 不是图片
        if (!isImage) {
          alert('上传的必须是图片')
        }

        // 3. 是图片
        fileList.forEach(file => {
          // 创建文件读取实例
          const fileReader = new FileReader();
          // 读取文件
          fileReader.readAsDataURL(file);

          fileReader.addEventListener('load', () => {
            setUrls(urls => {
              return urls.concat(fileReader.result as string)
            })
            // setUrls([...urls, fileReader.result as string])
          })
        })
      }
    })


  }
  const [urls, setUrls] = useState<string[]>([])
  return (
    <div>
      <div className='comp'>
        <div className="box" onDrop={handleDrop} onDragOver={handleDragOver}>
          <h2>拖住放进区域上传</h2>
          <div className='upload primary' onClick={() => handleClick()}>上传</div>
          <input ref={input} type="file" style={{ display: 'none' }} onChange={handleChange} />
        </div>
      </div>
      <div>
        {
          urls.map((v, i) => {
            return <img src={v} key={i} height={100} style={{ margin: 10 }} alt="" />
          })
        }
      </div>
      {/* <Confirm title='警告' content='确定要上传吗？'></Confirm> */}
    </div>
  )

}
export default App